<template>
  <div class="hello">
    <div v-if="!listloading" class="loadmore" :style="{'-webkit-overflow-scrolling': scrollMode}">
      <v-loadmore  :bottom-method="loadBottom"
                   :bottom-all-loaded="allLoaded"
                   :auto-fill="false"
                   ref="loadmore">
        <!--期刊数据-->
        <div>
          <div class="footTitle qikanList" v-for="item in pageList" @click="clickDetail(item.ids)">
            <p>{{item.qikan}}</p>
            <img src="@/assets/rightIcon.png">
          </div>
        </div>
      </v-loadmore>
    </div>

    <!--loading-->
    <div class="loading-container" v-show="listloading">
      <loading></loading>
    </div>
  </div>
</template>

<script>
  import Loading from './loading/loading'
  import {ajaxGet2,GetRequest} from '@/api/index'
  import {Loadmore} from 'mint-ui'

  export default {
    name: 'list',
    components:{
      Loading,
      'v-loadmore':Loadmore
    },
    data () {
      return {
        listloading:true,
        searchCondition:{  //分页属性
          pageNo:"1",
          pageSize:"20"
        },
        pageList:[],
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    mounted(){
      this.loadPageList();  //初次访问查询列表
    },
    methods:{
      loadBottom:function() {
        // 上拉加载
        this.more();// 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList:function (){
        // 查询数据
        const param=this.getParamArray();
        ajaxGet2(param).then((res)=>{
          this.listloading=false;
          if(res.data.success) {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
            this.isHaveMore(res.data.data.length);
            this.pageList = res.data.data;
            this.$nextTick(function () {
              // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
              // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
              // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
              this.scrollMode = "touch";
            });
          }
        });
      },
      more:function (){
        // 分页查询
        this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;
        const param=this.getParamArray();
        ajaxGet2(param).then((res)=>{
            this.listloading=false;
          if(res.data.success) {
            this.pageList = this.pageList.concat(res.data.data);
            this.isHaveMore(res.data.data.length);
          }
        });
      },
      isHaveMore:function(isHaveMore){
        // 是否还有下一页，如果没有就禁止上拉刷新
        this.allLoaded = true; //true是禁止上拉加载
        if(isHaveMore==20){
          this.allLoaded = false;
        }
      },
      getParamArray(){
        const param = [
          {key: "page", val: this.searchCondition.pageNo},
          {key: "limt", val: this.searchCondition.pageSize},
        ]
        return param;
      },
      clickDetail(ids){
          //跳转详情
          this.$router.push({
              path:`/detail?id=${ids}`
          })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .footTitle{
    display: flex;
    justify-content: space-between;
    width:100%
  }


  .qikanList{
    align-items: center;
    border-bottom: 1px dashed;
  }
  .qikanList>img{
    width:25px;
  }

</style>
